<template>
      <!-- 新增和修改对话框 -->
  <el-dialog
    v-model="dialogVisible"
    :title="ruleForm.id ? '修改' : '新增'"    
    width="500"
    :before-close="handleClose"
  >
    <el-form
    label-width="auto"
    ref="from"
    :model="ruleForm"
    :rules="rules"
    >
      <el-form-item label="名称:" prop="name">
        <el-input placeholder="请输入名称" v-model="ruleForm.name" ></el-input>
      </el-form-item>
      <el-form-item label="用户名:" prop="username"  >
        <el-input placeholder="请输入用户名" v-model="ruleForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="年龄:" prop="age">
        <el-input placeholder="请输入年龄" v-model="ruleForm.age" ></el-input>
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input placeholder="请输入地址" v-model="ruleForm.address" ></el-input>
      </el-form-item>
      <el-form-item label="联系方式:" prop="phone">
        <el-input placeholder="请输入联系方式" v-model="ruleForm.phone" ></el-input>
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="ruleForm.sex" class="ml-4">
        <el-radio value="男" >男</el-radio>
        <el-radio value="女" >女</el-radio>
      </el-radio-group>
        <!-- <el-input placeholder="请输入性别" v-model="ruleForm.sex" ></el-input> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="cancelButton()">取消</el-button>
        <el-button type="primary" @click="notarizeButton()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script setup>
  import {ref} from 'vue'
  import {bookAdd,bookUpdate} from '@/api/bookIndex.js'
  const emit=defineEmits(['success'])
  const from=ref()
  const ruleForm=ref({
    name:'',
    username:'',
    age:'',
    sex:'',
    phone:'',
    address:'',
  })
  const dialogVisible=ref(false)  
  const open=(row)=>{
    dialogVisible.value = true
    ruleForm.value={...row.row}
  }
  defineExpose({
    open
  })
  // 取消按钮
  const cancelButton=()=>{
    dialogVisible.value=false
  }
  // 确认按钮
  const notarizeButton=async()=>{ 
    await from.value.validate()
    if(ruleForm.value.id){
      await bookUpdate(ruleForm.value)
    }else{
      await bookAdd(ruleForm.value)
    }
    dialogVisible.value=false
    emit('success')
  }
  // 表单校验


  const rules={
    name:[
    {
          required: true,
          message: '请输入名称',
          trigger: 'blur',
        }
    ],
    username:[
    ],
    age:[
    {
          required: true,
          message: '请输入年龄',
          trigger: 'blur',
        }
    ],
    address:[
    {
          required: true,
          message: '请输入地址',
          trigger: 'blur',
        }
    ],
    phone:[
    {
          required: true,
          message: '请输入联系方式',
          trigger: 'blur',
        }
    ],
    sex:[
    {
          required: true,
          message: '请输入性别',
          trigger: 'blur',
        },
    {     
          min: 1, max: 2, message: 'Length should be 1 to 2', trigger: 'blur' 
        },

    ]
  }
  </script>
  
  <style>

  </style>